<template>
  <el-radio-group v-model="internalValue" v-on="$listeners" v-bind="$attrs" size="small" class="radioGroupForm" :class="$attrs.isButton ? 'is-button' : ''">
    <template v-if="$attrs.isButton">
      <el-radio-button v-for="(option, index) in options" :key="index" :label="option.value" class="radio-button">
        {{ option.label }}
      </el-radio-button>
    </template>
    <template v-else>
      <el-radio v-for="(option, index) in options" :key="index" :label="option.value">
        {{ option.label }}
      </el-radio>
    </template>
  </el-radio-group>
</template>

<script>
export default {
  props: {
    value: [String, Number],
    options: {
      type: Array,
      default: () => [],
    },
  },
  data () {
    return {
      internalValue: this.value,
    }
  },
  created () {
  },
  watch: {
    value (newVal, oldVal) {
      this.internalValue = newVal
    },
    internalValue (newVal) {
      this.$emit('input', newVal)
    },
  },
}
</script>
<style lang="less" scoped>
  .radio-button {
    margin-right: 3px;
  }
  /deep/.el-radio-button__orig-radio:checked+.el-radio-button__inner {
    color: #fff;
    height: 28px;
    background: rgba(48, 158, 255, 0.50);
    border: 1px solid rgba(48, 158, 255, 0.50);
    box-shadow: 0px 0 0 0 #409EFF;
  }
  /deep/.el-radio-button--small .el-radio-button__inner {
    height: 28px;
    background: rgba(143,171,191,0.1);
    border: 1px solid rgba(143, 171, 191, 0.10);
  }
  /deep/.el-radio-button:first-child .el-radio-button__inner {
    border-radius: 0;
  }
  /deep/.el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0;
  }
  /deep/.el-radio-button--small .el-radio-button__inner {
    padding: 7px 15px;
  }
  /deep/.el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
    box-shadow: none;
  }
</style>